<template>
    <div >
        <page-header @toLastPage="toLastPage">
        <template v-slot:title>
        更改微信号
      </template>
      <template v-slot:right>
        <van-button type="primary" size="small" style="marginTop:.4rem;height:1rem;" :disabled="disabled" @click="changeWeNum">保存</van-button>
      </template>
        </page-header>
        <div class="input">
            <input type="text" name="" id="" v-model="weNum">
            <div class="text">微信号是账号的唯一凭证，一年只能修改一次</div>
        </div>
    </div>
</template>
<script>
import pageHeader from '../common/pageHeader';
import {Meteor} from 'meteor/meteor';
export default {
    components:{
        pageHeader
    },
    created(){
        this.weNum = this.$route.params.weNum
    },
    data() {
        return {
            weNum:'',
            disabled:true
        }
    },
    watch:{
        weNum(){
            if(this.weNum !== this.$route.params.weNum){
                this.disabled = false
            }
        }
    },
    methods:{
        toLastPage(){
            this.$router.go(-1)
        },
        changeWeNum(){
            if(this.weNum.trim().length==0){
                return this.$toast('微信号不能为空')
            }
            Meteor.call('user.updateWeNum',{
                userId:sessionStorage.getItem('user'),
                weNum:this.weNum
            })
            this.$toast.loading({
            message: '正在保存',
            forbidClick: true,
            onClose:()=>{
                this.$router.go(-1)
            }
            });
        }
    }
}
</script>
<style scoped>
.input{
    margin-top: 2rem;
    padding: 0 .5rem;
    box-sizing: border-box;
}
input{
    background:none;  
	outline:none;  
	border:none;
    width: 100%;
    font-size: .7rem;
    padding: .3rem 0;
    border-bottom: #ccc 1px solid;

}
input:focus{
    border-bottom: #07C160 1px solid;
}
.text{
    margin-top: .5rem;
    color: #999;
    font-size: .5rem;
}
</style>